import React, { Component } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import { connect } from "react-redux";
import { Modal } from "antd-mobile";
import Card from "./card";
import {
	setSelectedBankCard,
	setSelectedBankList,
	getSelectedBankList,
	getSupportedBankList
} from "@redux/Action/bank/bank";
import BankItem from "./bankItem.js";
import yhTools from "@tools/yh";
import "./index.scss";
const BankIcon = require("@images/icon/addBank.png");

@connect(
	state => ({
		supportedBankList: state.bankReducer.supportedBankList || [],
		selectedBankList: state.bankReducer.selectedBankList,
		repaymentMoney: state.repaymentMoney
	}),
	dispatch => ({
		setSelectedBankCard: value => dispatch(setSelectedBankCard(value)),
		setSelectedBankList: list => dispatch(setSelectedBankList(list)),
		getSelectedBankList: value => dispatch(getSelectedBankList(value)),
		getSupportedBankList: (value, fun) =>
			dispatch(getSupportedBankList(value, fun))
	})
)
class BankList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			channelCode: "ll"
		};
	}
	componentDidMount = () => {
		const { channelCode } = this.state;
		const {
			selectedBankList,
			getSelectedBankList,
			getSupportedBankList
		} = this.props;
		getSupportedBankList({ channelCode });
		if (selectedBankList.length) return;
		getSelectedBankList({
			channelCode
		});
	};
	chooseBank = value => {
		if (this.props.repaymentMoney.type == "pay") {
			if (value.dayAmount - 0 < this.props.repaymentMoney.totalLoanFee - 0) {
				return false;
			}
		}
		this.props.setSelectedBankCard(value.cardNo);
		setTimeout(() => {
			this.props.history.goBack();
		}, 0);
	};
	addBank = () => {
		if (yhTools.getUrlParam("from")) {
			this.props.history.push(
				`/xhdAddBank?from=${yhTools.getUrlParam("from")}`
			);
		} else {
			this.props.history.push(`/xhdAddBank`);
		}
	};
	toggleVisible = isVisible => {
		this.setState({
			isVisible
		});
	};
	render() {
		const { isVisible } = this.state;
		const { selectedBankList, supportedBankList } = this.props;
		const _pageParams = {
			header: {
				title: "银行卡"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		console.log(selectedBankList);
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="bank-list-container">
					{selectedBankList.map(item => (
						<Card
							item={item}
							payMonery={this.props.repaymentMoney.totalLoanFee}
							onClick={this.chooseBank}
							key={Math.random()}
							type={this.props.repaymentMoney.type}
						/>
					))}
					<img
						src={BankIcon}
						alt=""
						onClick={this.addBank}
						className="add-icon"
					/>
					<Modal
						visible={isVisible}
						transparent
						maskClosable={true}
						title="银行卡支持列表"
						closable={true}
						onClose={() => this.toggleVisible(false)}
						className="bank-list-modal"
					>
						<div style={{ height: 300, overflow: "scroll" }}>
							{supportedBankList.map(item => (
								<BankItem item={item} key={Math.random()} />
							))}
						</div>
					</Modal>
					<span className="check-bank" onClick={() => this.toggleVisible(true)}>
						查看支持银行
					</span>
				</div>
			</MainLayout>
		);
	}
}

export default BankList;
